<template>

  <div>
    <el-upload
      class="upload-demo"
      action="#"
      :http-request="httpRequest"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      list-type="picture">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

  </div>


</template>

<script>

import {imgSave} from "@/api/img";

export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    httpRequest(data){
      /*自定义上传*/

      let formData = new FormData();
      formData.append('file', data.file);
      //使用raw才能正常上传


      imgSave(formData).then(
        res=>{
          if (res.code===0) {
            this.$message({
              type: 'success',
              message: '图片上传成功！'
            })

          } else {
            this.$message({
              /*上传失败*/
              type: 'error',
              message: res.msg
            })

          }
          this.$emit('refresh-me');
        }
      )

    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script>

<style scoped>

</style>
